<template>
    <view>
        <Header returnIcon="white" :background="background" :title="title" />
        <view class="content" :style="{'min-height': `${noBarHeight}px`}">
            <view class="block">
                <view class="list_row">
                    <view class="row_title">会员姓名</view>
                    <input
                        v-model="userInfo.member"
                        class="row_text"
                        :style="{'color': state ? '#494949' : ''}"
                        :disabled="!state"
                        placeholder="请输入"
                        placeholder-style="color: #e0e0e0"
                    />
                </view>
                <view class="list_row">
                    <view class="row_title">性别</view>
                    <view v-if="!state" class="row_text">{{ userInfo.gender1 == 1 ? '男' : '女' }}</view>
                    <radio-group @change="sexChange" class="row_text fcb" v-else>
                        <label>
                            <radio color="#5162fd" value="1" :checked="userInfo.gender1 == 1"></radio>男
                        </label>
                        <label>
                            <radio color="#5162fd" value="2" :checked="userInfo.gender1 == 2"></radio>女
                        </label>
                    </radio-group>
                </view>
                <view class="list_row">
                    <view class="row_title">所属单位</view>
                    <input
                        v-model="userInfo.company"
                        class="row_text"
                        :style="{'color': state ? '#494949' : ''}"
                        :disabled="!state"
                        placeholder="请输入"
                        placeholder-style="color: #e0e0e0"
                    />
                </view>
                <view class="list_row">
                    <view class="row_title">职务</view>
                    <input
                        v-model="userInfo.duty"
                        class="row_text"
                        :style="{'color': state ? '#494949' : ''}"
                        :disabled="!state"
                        placeholder="请输入"
                        placeholder-style="color: #e0e0e0"
                    />
                </view>
                <view class="list_row">
                    <view class="row_title">手机</view>
                    <input
                        v-model="userInfo.mobile"
                        type="number"
                        class="row_text"
                        :style="{'color': state ? '#494949' : ''}"
                        :disabled="!state"
                        placeholder="请输入"
                        placeholder-style="color: #e0e0e0"
                    />
                </view>
                <view class="list_row">
                    <view class="row_title">办公电话</view>
                    <input
                        v-model="userInfo.tel"
                        type="tel"
                        class="row_text"
                        :style="{'color': state ? '#494949' : ''}"
                        :disabled="!state"
                        placeholder="请输入"
                        placeholder-style="color: #e0e0e0"
                    />
                </view>
                <view class="list_row">
                    <view class="row_title">邮箱</view>
                    <input
                        v-model="userInfo.email"
                        class="row_text"
                        :style="{'color': state ? '#494949' : ''}"
                        :disabled="!state"
                        placeholder="请输入"
                        placeholder-style="color: #e0e0e0"
                    />
                </view>
            </view>
            <view class="block">
                <view class="list_row">
                    <view class="row_title">会员类型</view>
                    <view class="row_text">{{ userInfo.level }}</view>
                </view>
                <view class="list_row">
                    <view class="row_title">到期时间</view>
                    <view class="row_text">{{ userInfo.expire_date }}</view>
                </view>
            </view>
            <view v-if="!state" class="block" @click="loginOut">退出登录</view>
            <view v-else class="confirm" @click="onConfirm" :style="{'padding-bottom': `${footerRail ? 20 : ''}rpx`}">保存</view>
            <view v-if="!state" class="edit" @click="onEdit">修改</view>
        </view>
    </view>
</template>
<script>
import Header from "@/components/Header.vue";
import {editUser, logout, userInfo} from "@/utils/api/user";
var app = getApp()
export default ({
    name: "collect",
    data() {
        return {
            background: 'linear-gradient(0, #5162FD, #8E4EF7)',
            title: '账号设置',
            noBarHeight: app.globalData.noBarHeight,
            footerRail: app.globalData.footerRail,
            state: false,
            userInfo: {}
        }
    },
    components: {
        Header
    },
    onLoad() {
        const params = {
            uid: uni.getStorageSync('uid')
        }
        userInfo(params).then(res => {
            this.userInfo = res.data
        })
    },
    methods: {
        loginOut() {
            const params = {
                uid: uni.getStorageSync('uid')
            }
            logout(params).then(res => {
                uni.setStorageSync('isLogin', 0)
                uni.setStorageSync('uid', '')
                uni.redirectTo({
                    url: '../../pages/login/login'
                })
            })
        },
        onEdit() {
            this.state = !this.state
        },
        // 保存
        onConfirm() {
            const params = {
                uid: this.userInfo.id,
                email: this.userInfo.email,
                mobile: this.userInfo.mobile,
                tel: this.userInfo.tel,
                gender: this.userInfo.gender,
                duty: this.userInfo.duty,
                company: this.userInfo.duty,
                member: this.userInfo.member
            }
            editUser(params).then(res => {
                uni.showToast({
                    title: '修改成功',
                    icon: 'none'
                })
            })
        },
        sexChange(e) {
            this.userInfo.gender1 = e.detail.value
            if (this.userInfo.gender == '男') {
                this.userInfo.gender = '女'
            } else this.userInfo.gender = '男'
        }
    }
})
</script>

<style scoped lang="scss">
.content {
    flex-direction: column;
    width: 100%;
    background: #f8f8f8;
    display: flex;
    box-sizing: border-box;
    align-items: center;
    .block {
        width: 100%;
        min-height: 80rpx;
        background: white;
        margin-bottom: 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .list_row {
            display: flex;
            align-items: center;
            width: 100%;
            height: 88rpx;
            border-bottom: 2rpx solid #f8f8f8;
            .row_title {
                width: 200rpx;
                height: 100%;
                line-height: 88rpx;
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #C3C3C3;
                text-indent: 40rpx;
            }
            .row_text {
                width: 100%;
                flex: 1;
                height: 100%;
                line-height: 88rpx;
                font-size: 28rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                color: #9B9B9B;
                label {
                    width: 50%;
                }
            }
        }
    }
    .edit {
        position: fixed;
        bottom: 40rpx;
        width: 120rpx;
        height: 66rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        border-radius: 20rpx;
    }
    .confirm {
        height: 88rpx;
        width: 100%;
        background: white;
        position: fixed;
        bottom: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #5162FD;;
    }
}
</style>
